<template>
  <view class="root">
    <acme-app-bar title="Button"></acme-app-bar>
    
    <view class="button-group">
      <acme-button :w="400" block>基础用法</acme-button>
      <acme-button :w="400" :r="10">圆角按钮</acme-button>
      
      <acme-button :w="400" b="#496FF2" :textStyle="{ fontSize: '30rpx', color: '#fff' }" block>     
        自定义文字样式
      </acme-button>
      
      <acme-button :w="400" disabled block>禁用</acme-button>
      
      <acme-button>Button</acme-button>
      <acme-button :w="200" b="#1989fa">Button</acme-button>
      <acme-button :w="200" b="#FBA60F">Button</acme-button>
      
      <acme-button w="100%" navigateTo="/pages/widget/popup/index">
        navigateTo
      </acme-button>
      <acme-button w="100%" b="#ff976a" redirectTo="/pages/widget/popup/index">
        redirectTo
      </acme-button>
      <acme-button w="100%" b="#ff4d4d" reLaunch="/pages/widget/popup/index">
        reLaunch
      </acme-button>
      <acme-button w="100%" switchTab="/pages/widget/popup/index" disabled>
        switchTab disabled
      </acme-button>

      <acme-button w="100%" b="linear-gradient(to right, #ff2034, #ee8a24)">
        渐变按钮
      </acme-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {},
  };
</script>


<style lang="scss" scoped>
  .root {
    overflow: hidden;

    .button-group {
      margin-top: 20px;
      padding: 0 10px;

      /deep/ .acme-button {
        margin: 0 10px 10px 0;
      }
    }
  }
</style>